import React from 'react';
import { Spin, Typography, Icon as AntdIcon } from 'antd';
import { RecruitContext } from '@/pages/RecruitEmail/Context';
import { useHireConfirm } from '@/pages/RecruitEmail/hooks';
import { printScreenDown } from '@/pages/EntryManage/utils';
import { Result, PageWrap, Button, InterviewQuestionMobile } from '@/pages/RecruitEmail/mobile/components';
import { STATUS } from '@/pages/RecruitEmail/constants';
import BizIcon from '@/components/BizIcon';
import rejectPic from '@/pages/RecruitEmail/images/interview-bg-refuse.png';
import offerImg from '@/pages/RecruitEmail/images/offer.png';
import { pushRoute } from '@/pages/RecruitEmail/utils';

import styles from './index.less';
// 劳动合同类型单位
export const LABOUR_PERIOD_TYPE = [
    { value: 1, text: '年' },
    { value: 2, text: '月' }
];

// 试用期类型单位
export const PROBATION_PERIOD_TYPE = [
    { value: 1, text: '月' },
    { value: 2, text: '天' }
];

const { Paragraph } = Typography;
const InterviewOffer = ({ nid, id }) => {
    const [status, setStatus] = React.useState(undefined);
    // const [showRefuse, setShowRefuse] = React.useState(false);
    const [title, setTitle] = React.useState('');
    const [content, setContent] = React.useState('');
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { infoData, loadingData, handleAccept, submitLoading } = useHireConfirm({
        setStatus,
        employId: nid,
        agree: true
    });
    const context = React.useContext(RecruitContext);
    const { setEntryStatus } = context;
    React.useEffect(() => {
        switch (status) {
            case 'accept':
                setEntryStatus('entry');
                // getTotalDesc();
                // setTitle('请确认您的面试安排并及时接受邀请');
                // setContent('以免错失本次面试机会');
                // setTitleIcon(null);
                break;
            case 'confirmReject':
                // setTitleIcon('check-circle');
                // setTitle('已接受面试');
                // setContent('请尽快填写《应聘登记表》');
                break;
            case 'reject':
                // setTitleIcon('shixiao');
                setTitle('已拒绝录用');
                setContent('');
                break;
            case 'init':
                setTitle('请确认您的录用信息并及时接受');
                setContent('以免错失本次录用机会');
                break;
            default:
                // setTitleIcon(null);
                break;
        }
    }, [status]);
    const {
        probationPeriodNumber = 0,
        probationPeriodType = 1,
        labourPeriodNumber = '',
        labourPeriodType = 1,
        templateContent = ''
    } = infoData;

    const list = React.useMemo(() => {
        let resultList = [];
        if (infoData) {
            // 已提交面试offer
            // 服务年限
            let serviceTimeRange = '';
            // 服务年限年限
            serviceTimeRange +=
                labourPeriodNumber === -1
                    ? '无固定期限'
                    : `${labourPeriodNumber}${LABOUR_PERIOD_TYPE.find(item => item.value === labourPeriodType)?.text}`;
            // 试用期

            serviceTimeRange += `，包含${probationPeriodNumber}${probationPeriodType === 1 ? '个' : ''}${
                PROBATION_PERIOD_TYPE.find(item => item.value === probationPeriodType)?.text
            }试用期`;
            resultList = [
                {
                    key: '任职部门：',
                    value: infoData?.departmentName,
                    keyStyle: { color: '#858B9B', opacity: 0.5 },
                    valStyle: { color: '#2A2F3C', opacity: 0.5 }
                },
                {
                    key: '任职岗位：',
                    value: infoData?.dutyName,
                    keyStyle: { color: '#858B9B', opacity: 0.5 },
                    valStyle: { color: '#2A2F3C', opacity: 0.5 }
                },
                {
                    key: '入职时间：',
                    value: infoData?.suggestedEntryTime,
                    keyStyle: { color: '#858B9B', opacity: 0.5 },
                    valStyle: { color: '#2A2F3C', opacity: 0.5 }
                },
                {
                    key: '服务期限：',
                    value: serviceTimeRange,
                    keyStyle: { color: '#858B9B', opacity: 0.5 },
                    valStyle: { color: '#2A2F3C', opacity: 0.5 }
                }
            ];
        }
        return resultList;
    }, [infoData]);

    const pageContent = (
        <div
            id="printPage"
            style={{
                paddingLeft: 16,
                paddingRight: 16,
                paddingTop: 24,
                paddingBottom: 24,
                width: '100%',
                fontSize: 12,
                wordBreak: 'break-all'
            }}
        >
            <div>
                <div dangerouslySetInnerHTML={{ __html: templateContent }} />
                <div className={styles.line}></div>
                <Paragraph>
                    <a
                        className={styles.download}
                        onClick={() => {
                            // doPrint3();
                            printScreenDown(document.querySelector('#printPage'), '录用通知书');
                        }}
                    >
                        {status === 'init' ? (
                            <AntdIcon type="download" style={{ marginRight: '8px' }}></AntdIcon>
                        ) : (
                            <BizIcon
                                type="listfunction_viewinterview_icon_default"
                                style={{ marginRight: '8px' }}
                            ></BizIcon>
                        )}

                        {status === 'init' ? '下载录用通知书' : ' 查看录用通知书'}
                    </a>
                    <div className={styles.notice}>
                        录用通知书 PDF 文档已随录用邮件发送到您的邮箱，可随时前往邮箱查阅
                    </div>
                </Paragraph>
            </div>

            {/* <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
                <Button
                    className={styles.buttonWrap}
                    onClick={() => {
                        setShowRefuse(true);
                    }}
                >
                    拒绝
                </Button>
                <Button className={styles.buttonWrap} loading={submitLoading} type="primary" onClick={handleAccept}>
                    接受
                </Button>
            </div> */}
        </div>
    );

    const handleRefuse = () => {
        pushRoute({
            pathname: '/recruitment/offer_refuses',
            query: {
                nid,
                id
            }
        });
    };
    const type = React.useMemo(() => {
        if (!status) {
            return null;
        }
        if (status === 'init') {
            return STATUS.INITIAL;
        }
        if (status === 'reject') {
            return STATUS.REFUSE;
        }
        return null;
    }, [status]);
    const pic = React.useMemo(() => {
        if (status === 'init') {
            return offerImg;
        }
        return rejectPic;
    }, [status]);
    return (
        <Spin spinning={loadingData}>
            <PageWrap
                style={{ background: '#f6f7f8' }}
                footer={
                    status === 'init' && (
                        <div className={styles.footer}>
                            <Button
                                style={{ flex: 1 }}
                                onClick={handleRefuse}
                                // disabled={declareDetail?.settingSwitch === 1 && !form.getFieldValue('remove')}
                                // loading={submitLoading}
                                // onClick={handleSubmit}
                            >
                                拒绝
                            </Button>
                            <div className={styles.w}></div>
                            <Button
                                style={{ flex: 1 }}
                                type="primary"
                                // disabled={declareDetail?.settingSwitch === 1 && !form.getFieldValue('remove')}
                                loading={submitLoading}
                                onClick={handleAccept}
                            >
                                接受
                            </Button>
                        </div>
                    )
                }
            >
                <div className={styles.interviewMobile}>
                    <div className={styles.fakeItem} style={status === 'reject' ? { background: '#fff' } : {}}></div>

                    <div
                        className={status === 'init' ? styles.result : styles.result1}
                        style={status === 'reject' ? { background: '#fff' } : {}}
                    >
                        {type != null && <Result title={title} content={content} type={type} />}
                        <img alt="" src={pic} className={status === 'init' ? styles.imgInit : styles.imgReject} />
                        {status === 'init' && <div className={styles.con}> {pageContent}</div>}
                        <div className={styles.hdiv}></div>
                        {status === 'reject' && (
                            <div className={styles.con1}>
                                <div className={styles.interviewInfo}>录用信息</div>
                                <InterviewQuestionMobile list={list} />
                            </div>
                        )}
                    </div>
                </div>
            </PageWrap>
            {/* {refuseModal} */}
        </Spin>
    );
};
export default InterviewOffer;
